<html>
<head>
<#assign basePath=request.contextPath>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台管理系统</title>
<#include "/WEB-INF/views/template/bootMainCss.ftl" parse=true encoding="utf-8">
    <link href="${basePath}/bootstrap/css/form.lzy.css" rel="stylesheet">
    <style>
        /*.name{ float: right;}*/
        /*.row{ margin: 0;}*/
        .shop-img{ text-align: left; padding-left: 30px;}
        .shop-img img{ margin-right: 10px;}
        .panel-body{ padding-bottom:15px; }
        #tbodyId{ font-size: 13px;}
        #myTable thead{ font-size: 14px;}
        #qrcodeBox {width: 400px; height: 400px; display: none;}
        #qrcodeBox canvas{margin:40px auto 0; display: block;}
    </style>
</head>
<body>
<shiro:hasPermission name="sys:product:add">
    <input id="p_add"  value="1" type="hidden">
</shiro:hasPermission>
<shiro:hasPermission name="sys:product:update">
    <input id="p_update"  value="1" type="hidden">
</shiro:hasPermission>
<div class="panel panel-lzy">
    <div class="panel-body">
        <h5 class="tips-lzy">操作提示</h5>
        <ul class="tips-list-lzy">
            <li>◆&nbsp;<span>该页面显示了所有已购买套餐会员的相关信息。</span></li>
        </ul>
    </div>
</div>

<div class="panel panel-f5">
    <div class="panel-body row">
        <form id="myForm" class="form-inline form-margin-right">
            <div class="form-group">
                <span>姓名：</span>
                <input type="text" class="form-control" id="name" placeholder="请输入姓名">
                <span>手机号：</span>
                <input type="text" class="form-control" id="phone" placeholder="请输入手机号">
                <span>订单号：</span>
                <input type="text" class="form-control" id="orderId" placeholder="请输入订单号">
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-primary btn-sm" onclick="search(1)">查询</button>
            </div>
        </form>
    </div>
    <!-- 分页查询的地址-->
    <div class="panel-body panel-white">
        <div class="table-responsive">
            <table id="myTable"
                   class="table table-hover"
                   data-url="${basePath}/admin/coupons/member/json"
                   data-pageSize="10,50,100" data-method="GET">
                <thead>
                <!-- 需要循环的字段  对应mapper文件-->
                <tr>
                    <th  data-type="checkbox" data-field="id"></th>
                    <th  data-type="xuhao">序号</th>
                    <th  data-field="memberId">会员ID</th>
                    <th  data-field="qrcode" data-call="true">生成二维码</th>
                    <th  data-field="memberName">会员姓名</th>
                    <th  data-field="name">姓名</th>
                    <th  data-field="phone">手机号</th>
                    <th  data-field="contractManage" data-call="true">合同管理</th>
                    <th  data-field="purchaseHistory" data-call="true">购买记录</th>
                    <th  data-field="expenseHistory" data-call="true">消费记录</th>
                    <th  data-field="accountInfo" data-call="true">账户信息</th>
                    <th  data-field="subsidiesInfo" data-call="true">补贴信息</th>
                </tr>
                </thead>
                <tbody id="tbodyId">

                </tbody>
            </table>
        </div>
        <!-- 分页条-->
        <div class="row">
            <div align="left" class="col-xs-6">
                <div class="input-group">
                    <span class="input-group-addon" id="pageCount"></span> <select
                        id="pageSize" onchange="search(1)" class="form-control"
                        style="width: 100px"></select>
                </div>
            </div>
            <div align="right" class="col-xs-6">
                <ul class="pagination" id="pagination"></ul>
            </div>
        </div>
    </div>
</div>
<div id="qrcodeBox"></div>
<#include "/WEB-INF/views/template/bootMainJs.ftl" parse=true encoding="utf-8">
<script type="text/javascript" src="${basePath}/bootstrap/js/jquery.qrcode.min.js" type="text/javascript"></script>
<script type="text/javascript" src="${basePath}/bootstrap/js/utils.js" type="text/javascript"></script>
<script type="text/javascript" src="${basePath}/bootstrap/plugin/jqPaginator/jqPaginator.js"></script>
<script type="text/javascript" src="${basePath}/bootstrap/plugin/jqPaginator/myPage.js"></script>
<script type="text/javascript">
    //循环列表数据以及操作按钮
    function tableCallBack(data, id){
        if(id == 'qrcode'){
            return '<button type="button" class="btn btn-white btn-xs" onclick="createQrcode(' + data.memberId + ');">生成二维码 </button> '
        }
        else if(id=='contractManage'){
            var _btn = '';
            if(true){
                _btn = '<button type="button" class="btn btn-white btn-xs" onclick="viewContract(' + data.memberId + ');">审核合同 </button> ';
            }else{
                _btn = '<button type="button" class="btn btn-white btn-xs" onclick="viewContract(' + data.id + ');">查看合同 </button> ';
            }
            return _btn;
        }else if(id=='purchaseHistory'){
            return '<button type="button" class="btn btn-white btn-xs" onclick="viewPurchase(' + data.memberId + ');">查看记录 </button> ';
        }else if(id=='expenseHistory'){
            return '<button type="button" class="btn btn-white btn-xs" onclick="viewExpense(' + data.id + ');">查看记录 </button> ';
        }else if(id=='accountInfo'){
            return '<button type="button" class="btn btn-white btn-xs" onclick="viewAccount(' + data.memberId + ');">查看详情 </button> ';
        }else if(id=='subsidiesInfo'){
            return '<button type="button" class="btn btn-white btn-xs" onclick="viewInformation(' + data.memberId + ');">查看信息 </button> ';
        }

    }


    /*审核合同*/
    function viewContract(id){
        layer.open({
            type: 2,
            area: ['90%', '90%'],
            title:['审核合同','text-align:center;'],
            content: '${basePath}/admin/coupons/member/contractList/'+id //iframe的url
        })
    }

    /*生成二维码*/
    function createQrcode(id) {
        var date = new Date();
        var month = date.getMonth();
        var day = date.getDate();
        if (month < 9){
            month = "0" + (month + 1);
        }
        if (day < 10){
            day = "0" + day;
        }
        var dateStr = date.getFullYear().toString() + month.toString() + day.toString();
        var str = "https://lzyapp.ssl.lzyhll.com/share/pages/stone-forest/index.html?version=" +dateStr+ "&saleMan="+id;
        $('#qrcodeBox').html('');
        $('#qrcodeBox').qrcode(str);
        layer.open({
            type: 1,
            area: ['400px', '400px'],
            title:['&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;二维码','text-align:center;'],
            content: $('#qrcodeBox')
        })

    }
    /*购买记录*/
    function viewPurchase(id){
        layer.open({
            type: 2,
            area: ['90%', '90%'],
            title:['购买记录','text-align:center;'],
            content: '${basePath}/admin/coupons/member/purchaseList/'+id //iframe的url
        })
    }
    /*消费记录*/
    function viewExpense(id){
        layer.open({
            type: 2,
            area: ['90%', '90%'],
            title:['消费记录','text-align:center;'],
            content: '${basePath}/admin/coupons/member/expenseList/'+id //iframe的url
        })
    }

    /*查看详情*/
    function viewAccount(id){
        layer.open({
            type: 2,
            area: ['700px', '90%'],
            title:['查看详情','text-align:center;'],
            content: '${basePath}/admin/coupons/member/accountList/'+id //iframe的url
        })
    }

    /*查看信息*/
    function viewInformation(id){
        layer.open({
            type: 2,
            area: ['90%', '90%'],
            title:'会员管理-查看补贴信息',
            content: '${basePath}/admin/coupons/member/incomeList/'+id //iframe的url
        })
    }

</script>
</body>
</html>